<template>
  <div>
    <div class="plan-report">
      <el-row type="flex" class="row-bg" justify="space-between">
        <div class="time">
          <i class="el-icon-time icon"></i>
          {{ parseTime(recordData.date, "{y}/{m}/{d}") }}
          <span>{{ WEEK_DAY[new Date(recordData.date).getDay()] }}</span>
        </div>
        <!-- 报告classify类型下拉菜单 -->
        <classify-dropdown
          :classifyId="recordData.classify_id"
          :dropDownList="dropDownList"
          :onChange="handleChangeDropdown"
        />
      </el-row>
      <div class="person" >
        <i class="el-icon-user icon"></i>
        <span v-if="recordData.username" style="color: #409eff" @click="handleDialogSelectUser">{{
          recordData.username
        }}</span>
        <el-button v-else type="text" style="padding: 0" @click="handleDialogSelectUser">选择人员</el-button>
        
      </div> 
      <el-tooltip content="完成日报" effect="light" placement="right">
          <div class="person" style="width: 68px">
            <i class="el-icon-edit-outline icon"></i>
            <el-switch
              v-model="recordData.is_done"
              :disabled="recordData.is_done"
              style="margin-bottom:10px"
              >
            </el-switch>
          </div>
      </el-tooltip>
      <el-input
        type="textarea"
        :autosize="{ minRows: 6, maxRows: 10 }"
        placeholder="说点什么"
        v-model="recordData.content"
      >
      </el-input>
      <div class="workTime" style="margin-top:15px;display:flex;">
        <span class="spanTitle" style="display:inline-block;width:120px;line-height:28px">耗费时间(预计)：</span>
        <div style="60%">
        <el-input-number style="width:150px" v-model="recordData.take_time " :min="0" :precision="1" :step="1" size="mini"  label="耗费时长"></el-input-number>
        <el-select style="width:100px;margin-left:5px" :default-first-option="true" v-model="recordData.take_time_unit" size="mini" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </div>  
      </div>
    </div>
    <el-row style="margin-top: 20px">
      <el-popconfirm
        v-if="recordData.id && id == recordData.user_id"
        placement="top"
        title="确定要删除此记录吗？"
        @confirm="onDelete(recordData.id)"
      >
        <el-button
          slot="reference"
          size="mini"
          type="danger"
          style="float: left"
          >删除</el-button>
      </el-popconfirm>
      <div style="float: right">
        <el-button size="mini" type="text" @click="onCancel">取消</el-button>
        <el-button type="primary" size="mini" :disabled="isCanSure" @click="handleSubmit"
          >提交</el-button>
      </div>
    </el-row>
    <!-- 选择领导 -->
    <el-dialog
      title="选择人员"
      :visible.sync="dialogSelectUser"
      append-to-body
      :modal="false"
      width="90%"
      style="margin-top: -6vh"
    >
      <user-manager
        :isRadio="true"
        :userOuter="false"
        :onSelectUsers="handSelectLeader"
        ref="userManager"
      />
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { parseTime } from "@/utils/index.js";

export default {
  props: {
    recordData: {
      type: Object,
    },
    weekRecords: {
      type: Array,
    },
    dropDownList: {
      type: Array,
    },
    onSubmit: {
      type: Function,
    },
    onCancel: {
      type: Function,
    },
    onDelete: {
      type: Function,
    },
  },
  components: {
    UserManager: () =>
      import("@/views/markSys/taskCenter/components/userManager.vue"),
    ClassifyDropdown: () => import("../components/ClassifyDropdown.vue"),
  },
  computed: {
    ...mapGetters(["name", "id","roles"]),
  },
  data() {
    return {
      WEEK_DAY: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      content: "",
      dialogSelectUser: false,
      isCanSure:false,
       options: [{
          value: 'min',
          label: '分钟'
        }, {
          value: 'hour',
          label: '小时'
        }, {
          value: 'day',
          label: '天'
        }],
    };
  },
  watch:{
    recordData(newData){//日报框框 里面是否可以提交的控制
    console.log(newData)
      if(this.roles.some(role => ~role.indexOf('管理员'))){
        this.isCanSure = false
      }else{
        if(this.id == newData.user_id || newData.user){
          this.isCanSure = false
        }else{
          this.isCanSure = true
        }
      }
    },
  },
  methods: {
    parseTime,
    handleChangeDropdown(id) {
      console.log(id);
      this.recordData.classify = id;
    },
    handSelectLeader(users) {
      if (!users.length) {
        this.$message.info("请选择处理人");
        return;
      }
      const { first_name, id } = users[0];

      this.recordData = { ...this.recordData, username: first_name, user: id };
      this.dialogSelectUser = false;
    },
    handleImportWeekRecord() {
      const { user } = this.recordData;
      if (!user) {
        this.$message.info("请选择人员");
        return;
      }
      if (!this.weekRecords.length) {
        this.$message.info("未找到相关内容");
        return;
      }
      const contents = this.weekRecords
        .filter((item) => item.user === user)
        .map((item) => item.date + "\n" + item.content);
      const _contentStr = contents.join("\n\n");
      this.recordData.content = _contentStr;
    },
    handleSubmit() {
      const { content, username,take_time ,type } = this.recordData;
      console.log(this.recordData);
      if (!username.length) {
        this.$message.info("请选择人员");
        return;
      }
      if (!content.length) {
        this.$message.info("请输入内容");
        return;
      }
      if(!take_time){
        this.$message.info("请输入耗费时间");
        return;
      }
      this.onSubmit({ ...this.recordData });
    },
    handleDialogSelectUser(){
      if(this.roles.some(role => ~role.indexOf('管理员'))){
        this.dialogSelectUser = true
      }
    }
  },
}
</script>
<style lang="scss">
.plan-report {
  .time,
  .person,
  .type {
    margin-bottom: 10px;
    line-height: 20px;
    font-size: 13px;
    color: #232323;

    .icon {
      margin-right: 6px;
      font-size: 18px;
      vertical-align: top;
    }

    .importBtn {
      float: right;
      margin-top: 5px;
      font-size: 12px;
      color: #409eff;
      cursor: pointer;
    }
  }
  @media screen and (max-width:500px) {
    .workTime{
      width: 100% !important;
      flex-wrap: wrap;
      > div{
        width: 100% !important;
        > div:first-child{
          width: 150px !important;
        }
        > div:last-child{
          width: 100px !important;
        }
      }
    }
    .spanTitle{
      width: 100% !important;
      display: block !important;
    }
  }
  .person {
    cursor: pointer;
  }
  .type {
    margin-bottom: 16px;
  }
}
</style>